<template>
  <div style="padding-top: 16px;">
    <p>
      <strong>预览</strong>
    </p>
    <z-button-group>
      <z-button>默认按钮</z-button>
      <z-button icon="settings">icon按钮</z-button>
      <z-button :loading="true">loading按钮</z-button>
      <z-button disabled>禁用按钮</z-button>
    </z-button-group>
    <p>
      <strong>代码</strong>
    </p>
    <pre><code>{{content}}</code></pre>
  </div>
</template>
<script>
  import {zButton, zButtonGroup} from '../../../src/main'
  export default {
    components: {
      zButton, zButtonGroup
    },
    data () {
      return {
        content: `
          <z-button-group>
            <z-button>默认按钮</z-button>
            <z-button icon="settings">icon按钮</z-button>
            <z-button :loading="true">loading按钮</z-button>
            <z-button disabled>禁用按钮</z-button>
          </z-button-group>
      `.replace(/^ {8}/gm, '').trim()
      }
    }
  }
</script>